<div
  #sliderSelect
  class="x-slider-select"
  [class.x-flex]="justify || align || direction"
  [class.x-disabled]="disabled"
  [class.x-required]="requiredIsEmpty"
  [class.x-invalid]="invalid"
>
  <label *ngIf="label" [style.width]="labelWidth" [ngClass]="labelMap">{{ label }}</label>
  <div class="x-slider-select-inner" #innerRef>
    <div class="x-slider-select-rail" #railRef>
      <div></div>
    </div>
    <div class="x-slider-select-track" #trackRef>
      <div class="x-slider-select-process" #processRef></div>
    </div>
    <div class="x-slider-select-drags">
      <div
        #dragRef
        class="x-slider-select-drag"
        cdkDrag
        cdkDragLockAxis="x"
        [cdkDragDisabled]="disabled"
        [cdkDragBoundary]="innerRef"
        (cdkDragStarted)="started($event)"
        (cdkDragEnded)="ended($event)"
        (cdkDragMoved)="moved($event)"
      >
        <div
          #tooltip
          x-tooltip
          class="x-slider-select-button"
          placement="top"
          [content]="displayValue"
          [visible]="visible"
          [manual]="manual"
        ></div>
      </div>
    </div>
  </div>
</div>
